<template>
	<view class="index-container">
		<image src="http://129.211.122.30:8080/v1/userinyerface/logo"></image>
		<view class="foreword">
			<p>
				Hi and welcome to User Inyerface,<br>
				a challenging exploration of<br>
				user interactions and design patterns.</p>
			<p>
				To play the game, simply fill in the form<br>
				as fast and accurate as possible.
			</p>
		</view>
		<view :class="[isBtnBigger? 'no-btn-bigger':'no-btn']" @touchstart="setNoBtnBingger">
			NO
		</view>
		<view class="footer-container">
			<view>
				Plese
			</view>
			<view class="underline">
				click
			</view>
			<view @touchstart="navToLogin">
				HERE
			</view>
			<view>
				to GO to the
			</view>
			<view class="next-page">
				next page
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isBtnBigger: false,
				timmer: null
			}
		},
		onLoad() {

		},
		methods: {
			// NO 按钮变大变小
			setNoBtnBingger() {
				this.isBtnBigger = true;
				clearTimeout(this.timmer)
				this.timmer = setTimeout(() => {
					this.isBtnBigger = false;
				}, 100)
			},
			// 跳转到regist页面
			navToLogin() {
				wx.navigateTo({
					url: '../regist/regist'
				})
			}
		}
	}
</script>

<style lang="less">
	.index-container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: auto;
		background-color: #0c58da;

		image {
			display: block;
			margin: 100rpx auto 80rpx;
			width: 600rpx;
			height: 350rpx;
		}

		.foreword {
			p {
				padding-bottom: 20rpx;
				color: #29c566;
				font-size: 40rpx;
				font-weight: lighter;
				text-align: center;
				line-height: 60rpx;
			}
		}

		.no-btn {
			margin: 80rpx auto;
			padding: 0;
			border: 0;
			border-radius: 50%;
			box-shadow: 0 4px 4px rgba(0, 0, 0, .4);
			outline: 0;
			height: 220rpx;
			width: 220rpx;
			background-color: #29c566;
			color: #fff;
			font-size: 32px;
			font-weight: 700;
			line-height: 220rpx;
			text-align: center;
		}

		.no-btn-bigger {
			margin: 65rpx auto;
			padding: 0;
			border: 0;
			border-radius: 50%;
			transition: transform .2s ease-out;
			outline: 0;
			height: 250rpx;
			width: 250rpx;
			background-color: #29c566;
			color: #fff;
			font-size: 32px;
			font-weight: 700;
			line-height: 250rpx;
			text-align: center;
		}

		.footer-container {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: sans-serif;
			font-weight: lighter;
			view {
				margin: 0 5rpx;
			}
			.underline {
				position: relative;
			}
			.underline::before {
				position: absolute;
				bottom: 5rpx;
				left: 0rpx;
				content: '';
				width: 60rpx;
				border-bottom: 1px solid black;
			}
			.next-page {
				color: rgba(255, 255, 255, .4);
			}
		}
	}
</style>
